<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丧失控制权会计处理交互指南</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Chosen Palette: Warm Neutrals with Teal Accent -->
    <!-- Application Structure Plan: A tab-based single-page application. The two primary scenarios (Active Sale vs. Passive Dilution) are separated into tabs for clarity and focused learning. Within each tab, a step-by-step, interactive walkthrough guides the user through the calculations for both individual and consolidated statements. This structure breaks down complex information into manageable chunks, using interactive calculators and visualizations to enhance understanding, which is more effective for learning than a linear text document. -->
    <!-- Visualization & Content Choices: 
        - Goal: Compare Individual vs. Consolidated statements. Method: Side-by-side layout with distinct calculation flows and summary cards. Interaction: User follows guided steps. Justification: Directly addresses the core complexity of the topic.
        - Goal: Show composition of an account balance (e.g., final book value). Method: Interactive Bar Chart (Chart.js). Interaction: Chart bars appear as the user progresses through calculation steps. Justification: Visually connects individual adjustments to the final result.
        - Goal: Explain the difference in investment income. Method: Donut Chart (Chart.js) breaking down the adjustments needed to get from individual to consolidated income. Interaction: Hovering over segments shows details. Justification: Simplifies the complex reconciliation process into an easy-to-understand visual.
        - Goal: Define key terms. Method: Hover-activated tooltips. Interaction: Simple hover. Justification: Provides context without cluttering the main interface.
        - All diagrams and flows are built with HTML/CSS to adhere to the NO SVG/Mermaid constraint.
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .tab-active {
            border-color: #0d9488;
            color: #0d9488;
            font-weight: 600;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
            border-bottom: 1px dotted #0d9488;
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 240px;
            background-color: #1f2937;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -120px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #1f2937 transparent transparent transparent;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            height: 320px;
            max-height: 400px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 350px;
            }
        }
        .step-card {
            transition: all 0.3s ease-in-out;
            transform: translateY(10px);
            opacity: 0;
        }
        .step-card.visible {
            transform: translateY(0);
            opacity: 1;
        }
        .formula {
            font-family: monospace;
            background-color: #f3f4f6;
            padding: 1rem;
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb;
            color: #111827;
            font-size: 1rem;
            line-height: 1.75;
            text-align: center;
        }
    </style>
</head>
<body class="bg-stone-50 text-stone-800">

    <div id="app" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-teal-700">丧失控制权会计处理交互指南</h1>
            <p class="mt-4 text-lg text-stone-600">通过两个交互式案例，轻松掌握复杂的会计准则</p>
        </header>

        <nav class="mb-8 border-b border-stone-200">
            <ul class="flex justify-center -mb-px">
                <li>
                    <button id="tab-sale" class="tab-btn tab-active text-lg px-6 py-3 border-b-2 border-transparent">场景一：主动出售股权</button>
                </li>
                <li>
                    <button id="tab-dilution" class="tab-btn text-lg px-6 py-3 border-b-2 border-transparent">场景二：被动稀释</button>
                </li>
            </ul>
        </nav>

        <main id="content-container">
            <!-- Content will be injected here by JavaScript -->
        </main>
    </div>

<script>
const appData = {
    sale: {
        title: "场景一：主动出售股权导致丧失控制权",
        description: "本案例模拟甲公司通过出售60%股权，导致对原子公司乙公司的持股比例从100%下降至40%，从而丧失控制权。我们将分步拆解在“甲公司个别报表”和“合并报表”中的不同处理方法。",
        caseInfo: [
            { label: '投资方', value: '甲公司' },
            { label: '被投资方', value: '乙公司' },
            { label: '初始投资', value: '支付6000万，取得100%股权 (某七年1月1号)' },
            { label: '初始商誉', value: '1000万 (投资成本6000万 - 可辨认净资产公允价值5000万)' },
            { label: '持有期间权益变动', value: '净利润+500万，其他综合收益+250万' },
            { label: '处置交易', value: '转让60%股权，取得4800万 (某九年1月8号)' },
            { label: '剩余股权公允价值', value: '剩余40%股权在处置日公允价值为3200万' }
        ],
        content: `
            <div id="individual-report" class="mb-16">
                <h3 class="text-2xl font-bold text-center text-teal-700 mb-6">Part 1: 甲公司个别财务报表的处理</h3>
                <div class="max-w-3xl mx-auto text-center text-stone-600 mb-8">
                    <p>在甲公司自己的“小账本”上，处理过程分为两步：首先，计算卖掉的60%股权赚了多少钱；然后，对剩下的40%股权，我们要“穿越”回去，用更精细的权益法重新核算，把这两年它替我们赚的钱都补记上。</p>
                </div>
                <div class="space-y-8">
                    <div class="step-card bg-white p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-3 text-teal-600">第一步：确认处置60%股权的投资收益</h4>
                        <p class="mb-4">这是最直接的计算，即 处置收入 - 处置部分的成本。</p>
                        <div class="formula">
                            处置收入(4800万) - 处置股权成本(6000万 × 60% = 3600万) = <span class="font-bold text-teal-700">1200万</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-3 text-teal-600">第二步：剩余40%股权按权益法追溯调整</h4>
                        <p class="mb-4">从控制转为重大影响，核算方法从成本法转为权益法，需要对剩余股权从投资之初进行追溯调整。剩余40%股权的初始成本为 <span class="font-bold">2400万</span> (6000万 × 40%)。</p>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="bg-stone-50 p-4 rounded-lg">
                                <h5 class="font-semibold mb-2">A. 调整净利润部分</h5>
                                <p>乙公司2年累计净利润500万，甲公司按40%应享有：</p>
                                <div class="formula mt-2">500万 × 40% = <span class="font-bold text-teal-700">+200万</span></div>
                            </div>
                            <div class="bg-stone-50 p-4 rounded-lg">
                                <h5 class="font-semibold mb-2">B. 调整<span class="tooltip">其他综合收益<span class="tooltiptext">通常指未实现的利得和损失，如某些金融资产的公允价值变动。它不计入当期净利润，但会影响所有者权益。</span></span>部分</h5>
                                <p>乙公司2年其他综合收益增加250万，甲公司按40%应享有：</p>
                                <div class="formula mt-2">250万 × 40% = <span class="font-bold text-teal-700">+100万</span></div>
                            </div>
                        </div>
                    </div>
                     <div class="step-card bg-white p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-3 text-teal-600">最终结果：剩余40%股权账面价值</h4>
                        <p class="mb-4">经过追溯调整后，在甲公司个别报表中，剩余40%股权的最终账面价值由三部分构成。</p>
                        <div class="chart-container"><canvas id="individualChart"></canvas></div>
                    </div>
                </div>
            </div>

            <div class="border-t-4 border-dashed border-teal-200 my-16"></div>

            <div id="consolidated-report">
                 <h3 class="text-2xl font-bold text-center text-teal-700 mb-6">Part 2: 合并财务报表的处理</h3>
                 <div class="max-w-3xl mx-auto text-center text-stone-600 mb-8">
                    <p>在合并“大家庭”的视角下，我们不再修修补补，而是进行一次彻底的“清算与重启”。核心原则：<span class="font-bold">假装将100%股权全部按公允价值卖掉，确认总收益</span>。然后将个别报表的结果调整至此。</p>
                </div>
                <div class="grid lg:grid-cols-2 gap-8">
                    <div class="step-card bg-white p-6 rounded-lg shadow-md space-y-4">
                        <h4 class="text-xl font-semibold mb-2 text-teal-600">第一步：计算合并层面应确认的总收益</h4>
                        <p class="font-semibold">总收入 (假装全部卖掉):</p>
                        <div class="formula">4800万(出售部分) + 3200万(剩余部分市价) = <span class="font-bold">8000万</span></div>
                        <p class="font-semibold">总成本 (合并账面价值):</p>
                        <div class="formula">6000万(初始投资) + 750万(期间权益总变动) = <span class="font-bold">6750万</span></div>
                        <hr/>
                        <p class="font-semibold text-lg">合并总投资收益:</p>
                        <div class="formula text-xl">8000万 - 6750万 = <span class="font-bold text-teal-700">1250万</span></div>
                    </div>
                    <div class="step-card bg-white p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-2 text-teal-600">第二步：从个别报表收益到合并报表收益</h4>
                        <p class="mb-4">个别报表已确认收益1200万，合并要求1250万，需要调增50万。这50万的差额从何而来？</p>
                        <div class="chart-container"><canvas id="consolidatedChart"></canvas></div>
                    </div>
                </div>
                 <div class="step-card mt-8 bg-teal-50 border border-teal-200 p-6 rounded-lg shadow-md">
                    <h4 class="text-xl font-semibold mb-3 text-teal-700">核心结论</h4>
                    <p class="text-stone-700">个别报表投资收益($1200万)与合并报表投资收益($1250万)的差额($50万)，本质上是由于会计视角的根本不同造成的。合并报表进行了一次更彻底的清算，将剩余股权按<span class="tooltip">公允价值<span class="tooltiptext">指在市场上，一项资产可以被买卖的公平价格。</span></span>重估的利得也计入了当期损益，同时考虑了原先未在个别报表中体现的、属于已售出部分的权益变动。</p>
                 </div>
            </div>
        `
    },
    dilution: {
        title: "场景二：被动稀释导致丧失控制权",
        description: "本案例模拟甲公司并未出售股权，但由于乙公司向第三方丙公司增发新股，导致甲公司的持股比例从60%被动下降至40%，从而丧失控制权。",
        caseInfo: [
            { label: '投资方', value: '甲公司' },
            { label: '被投资方', value: '乙公司' },
            { label: '初始投资', value: '支付3000万，取得60%股权' },
            { label: '期间净利润', value: '+2500万' },
            { label: '稀释事件', value: '丙公司向乙公司增资2700万' },
            { label: '最终持股', value: '甲公司持股比例下降至40% (丧失控制权)' }
        ],
        content: `
            <div id="dilution-report">
                 <h3 class="text-2xl font-bold text-center text-teal-700 mb-6">个别财务报表的处理</h3>
                 <div class="max-w-3xl mx-auto text-center text-stone-600 mb-8">
                    <p>由于是第三方增资导致的股权稀释，会计上认为，我们因新股东投入而享有的净资产增值，与我们被稀释掉那部分股权的账面价值之间的差额，应计入损益。</p>
                </div>
                <div class="space-y-8">
                     <div class="step-card bg-white p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-3 text-teal-600">第一步：确认因稀释产生的投资收益</h4>
                        <p class="mb-4">我们将“被稀释掉的20%股权”视同处置，其“处置对价”就是我们因丙公司增资而享有的净资产增加额。</p>
                        <p class="font-semibold">“处置”对价 (享有丙增资额的40%):</p>
                        <div class="formula">2700万 × 40% = <span class="font-bold">1080万</span></div>
                        <p class="font-semibold mt-4">“处置”成本 (原20%股权成本):</p>
                        <div class="formula">3000万 × (20% / 60%) = <span class="font-bold">1000万</span></div>
                        <hr class="my-4"/>
                        <p class="font-semibold text-lg">因稀释产生的投资收益:</p>
                        <div class="formula text-xl">1080万 - 1000万 = <span class="font-bold text-teal-700">80万</span></div>
                    </div>
                    <div class="step-card bg-white p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-3 text-teal-600">第二步：剩余40%股权按权益法追溯调整</h4>
                        <p class="mb-4">与场景一类似，对剩余的40%股权（原成本2000万）进行追溯调整，确认应享有的累计净利润。</p>
                        <p>乙公司累计净利润2500万，甲公司按40%应享有：</p>
                        <div class="formula mt-2">2500万 × 40% = <span class="font-bold text-teal-700">+1000万</span></div>
                        <p class="mt-4 text-stone-600">其中，以前年度利润对应的800万(<span class="font-mono">2000*40%</span>)调整留存收益，当年利润对应的200万(<span class="font-mono">500*40%</span>)计入当期投资收益。</p>
                    </div>
                     <div class="step-card mt-8 bg-teal-50 border border-teal-200 p-6 rounded-lg shadow-md">
                        <h4 class="text-xl font-semibold mb-3 text-teal-700">最终结果</h4>
                        <p class="text-stone-700">甲公司在某九年个别报表中，总共确认的投资收益为： <span class="font-bold">80万 (稀释利得) + 200万 (当年应享有的利润) = 280万</span>。同时，长期股权投资的账面价值也经过了相应的调整。</p>
                     </div>
                </div>
            </div>
        `
    }
};

const contentContainer = document.getElementById('content-container');
const tabButtons = document.querySelectorAll('.tab-btn');
let individualChart = null;
let consolidatedChart = null;

function renderContent(scenario) {
    const data = appData[scenario];
    let caseInfoHtml = data.caseInfo.map(item => `
        <div class="bg-stone-100 p-4 rounded-lg">
            <p class="text-sm text-stone-500">${item.label}</p>
            <p class="font-semibold text-stone-700">${item.value}</p>
        </div>
    `).join('');

    contentContainer.innerHTML = `
        <section class="bg-white p-8 rounded-lg shadow-lg mb-12">
            <h2 class="text-3xl font-bold text-center mb-4 text-stone-800">${data.title}</h2>
            <p class="text-center max-w-4xl mx-auto text-stone-600 mb-8">${data.description}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
                ${caseInfoHtml}
            </div>
        </section>
        ${data.content}
    `;

    // Trigger animations
    const stepCards = document.querySelectorAll('.step-card');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    stepCards.forEach(card => {
        observer.observe(card);
    });

    if (scenario === 'sale') {
        setTimeout(() => {
            createIndividualChart();
            createConsolidatedChart();
        }, 300);
    }
}

function createIndividualChart() {
    const ctx = document.getElementById('individualChart');
    if (!ctx) return;

    if (individualChart) {
        individualChart.destroy();
    }

    individualChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['最终账面价值构成'],
            datasets: [
                {
                    label: '初始成本',
                    data: [2400],
                    backgroundColor: '#14b8a6',
                },
                {
                    label: '损益调整',
                    data: [200],
                    backgroundColor: '#2dd4bf',
                },
                 {
                    label: '其他综合收益调整',
                    data: [100],
                    backgroundColor: '#5eead4',
                }
            ]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: { display: true, text: '剩余40%股权最终账面价值: 2700万' },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.dataset.label}: ${context.raw} 万`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    title: { display: true, text: '金额 (万元)' }
                },
                y: {
                    stacked: true,
                }
            }
        }
    });
}

function createConsolidatedChart() {
    const ctx = document.getElementById('consolidatedChart');
    if (!ctx) return;

    if (consolidatedChart) {
        consolidatedChart.destroy();
    }
    
    consolidatedChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['个别报表已确认收益', '剩余股权公允价值重估利得', '冲减：已售股权持有期间的权益变动'],
            datasets: [{
                data: [1200, 500, -450],
                backgroundColor: ['#0d9488', '#2dd4bf', '#fca5a5'],
                borderColor: '#ffffff',
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: '合并投资收益(1250万)构成分析',
                    font: { size: 16 }
                },
                tooltip: {
                     callbacks: {
                        label: function(context) {
                            let label = context.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed + ' 万';
                            }
                            return label;
                        }
                    }
                },
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

tabButtons.forEach(button => {
    button.addEventListener('click', () => {
        tabButtons.forEach(btn => btn.classList.remove('tab-active'));
        button.classList.add('tab-active');
        const scenario = button.id.split('-')[1];
        renderContent(scenario);
    });
});

// Initial render
renderContent('sale');

</script>
</body>
</html>
